<template>
  <header>
    <div class="nav-outside nav-fixed">
      <nav class="nav">
        <div class="logo">
          <nuxt-link to="/">
            <img :src="webInfo.logo" alt="" id="normal-logo">
          </nuxt-link>
        </div>
        <div class="nav-list">
          <ul class="page-link theme-color page-link-all">
            <li class="" v-for="item in navList" :class="item.id==currentId?'active':''" @click="selectNav(item.id)">
              <nuxt-link :to="item.router" class="theme-color">
                <span>{{item.name}}</span>
              </nuxt-link>
            </li>
          </ul>
          <div class="nav-line"></div>
        </div>

      </nav>
    </div>
  </header>
</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';
    export default {
      name: "navComponent",
      data:function(){
        return {
          webInfo:{},
          currentId:'',
          navList:[
            {
              id:1,
              name:'首页',
              router:'/'
            },
            {
              id:2,
              name:'天赋能',
              router:'/mainPage/tfn'
            },
            {
              id:3,
              name:'产业布局',
              router:'/mainPage/layout'
            },
            {
              id:4,
              name:'科技发展',
              router:'/mainPage/tech'
            },
            {
              id:5,
              name:'新闻中心',
              router:'/mainPage/news'
            },
            {
              id:6,
              name:'社会责任',
              router:'/mainPage/responsibility'
            },
            {
              id:7,
              name:'联系我们',
              router:'/mainPage/contact'
            }


          ]
        }
      },
      created(){
        this.getWebInfo();
        this.setCurrent(this.$route.path);
        // this.navStatue();
      },
      mounted(){
      },
      methods:{
        getWebInfo(){
          axios.get('http://tfngw.tfnhg.com/Api/New/get_web').then(
            res=>{
              this.webInfo = res.data;

            }
          )
        },
        selectNav(id){
          this.currentId = id;
        },
        setCurrent(path){
          let path_n = path.split('/')[2];
          let navList = this.navList;
          for(let i in navList){
            if(path_n == navList[i].router.split('/')[2]){
              this.currentId = navList[i].id
            }
          }
        },
        navStatue(){
          let $liCur = $('.page-link-all li.active');
          let curP = $liCur.position().left;
          let curW = $liCur.outerWidth(true);
          let $slider = $(".nav-line");
          let $targetEle = $('.page-link-all li a');
          let $navBox = $('.page-link-all');
          $slider.stop(true, true).animate({
            "left":curP,
            "width":curW
          });
          $targetEle.mouseenter(function () {
            var $_parent = $(this).parent(),
              _width = $_parent.outerWidth(true),
              posL = $_parent.position().left;
            $slider.stop(true, true).animate({
              "left":posL,
              "width":_width
            },"fast");
          });
          $navBox.mouseleave(function (cur, wid) {
            cur = curP;
            wid = curW;
            $slider.stop(true, true).animate({
              "left":cur,
              "width":wid
            }, "fast");
          });
        }
      }
    }
</script>

<style scoped lang="less">
  @import "../assets/css/main.less";
  .nav-outside{
    width: 100%;
    height:1rem;
    box-shadow: 0 0 5px #aaa;
    background: white;
  }
  .nav-fixed{
    position: fixed;
    left: 0;
    top:0;
    z-index: 1000;
  }
  .nav{
    display: flex;
    flex-flow: row nowrap;
    width: 78%;
    margin: 0 auto;
    height:1rem;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }
  .logo{
    /*width:1.97rem;*/
    height:1rem;
  }
  .logo a{
    display: flex;
    width: 100%;
    height:1rem;
    flex-flow: column nowrap;
    justify-content: center;
  }
  .logo img{
    /*width: 100%;*/
    height:0.58rem;
  }
  .nav-list{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    position: relative;
  }
  .page-link{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }

  .page-link li{
    width: 0.84rem;
    text-align: center;
    font-size: 0.15rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    height:1rem;
    border-bottom: 3px solid transparent;
    box-sizing: border-box;
  }
  .page-link li.active{
    border-bottom: 3px solid @themeColor;
  }

  .page-link li>a{
    display: flex;
    flex-flow:column nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    height:1rem;
  }

  .page-link li>a>span{
    display: block;
    width: 100%;
    border-right:1px solid @themeColor;
  }
  .nav-line{
    background: none repeat scroll 0 0 @themeColor;
    bottom: -1px;
    font-size: 0;
    height: 3px;
    left: 0;
    line-height: 4px;
    position: absolute;
    /*width: 90px;*/
  }
</style>
